<template>
  <el-dialog width="800px" ref="dialog" :close-on-click-modal="false" :close-on-press-escape="false">
    <!-- 插槽 -->
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancle">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="confirmLoading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
<script setup>
import { ElDialog } from 'element-plus'
import { ref } from 'vue'

const props = defineProps({
  confirm: {
    type: Function,
    default: () => Promise.resolve()
  }
})

const dialog = ref(null)
const handleCancle = () => {
  if (dialog.value) {
    dialog.value.visible = false
  }
}

let confirmLoading = ref(false)
const handleConfirm = async () => {
  confirmLoading.value = true
  await props.confirm().finally(() => {
    confirmLoading.value = false
  })
}
</script>
